<template>
  <div class="goods_count">
    <div class="store-banner" v-if="storeDetail.top_banner">
      <img :src="storeDetail.top_banner" alt="" />
    </div>
    <div class="menu-count">
      <div class="user-menu user-wrapper acea-row row-middle">
        <div class="menu-main acea-row row-middle">
          <div
            @click="goPage(menu, index)"
            @mouseenter="showCategory(index)"
            class="menu-item"
            v-for="(menu, index) in userMenu"
            :key="index"
          >
            {{ menu.title }}
          </div>
        </div>
        <div class="menu-search acea-row row-middle">
          <div class="text">
            <input
              type="text"
              :placeholder="$t('page.goodsSearch.navTitle')"
              v-model="search"
            />
          </div>
          <div class="bnt" @click="submit">
            <span class="iconfont icon-xiazai5"></span>
          </div>
        </div>
        <div
          v-if="seen"
          class="category acea-row row-middle"
          @mouseleave="leave()"
        >
          <div class="sort">
            <div
              class="item acea-row row-between-wrapper"
              v-for="(item, index) in category"
              :key="index"
            >
              <div class="name line1">
                {{ item.cate_name }}<span class="iconfont icon-you"></span>
              </div>
              <div class="sortCon">
                <div class="erSort acea-row">
                  <div
                    class="sub-item line1"
                    v-for="(itemn, indexn) in item.children"
                    :key="indexn"
                    @click="goCategoryGoods(itemn.store_category_id)"
                  >
                    {{ itemn.cate_name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <nuxt-link
            class="moreBtn"
            :to="{ path: '/store/category', query: { id: storeInfo.mer_id } }"
            >{{ $t("page.index.allproducts") }}</nuxt-link
          >
        </div>
      </div>
    </div>
    <div class="goods-detail">
      <div class="wrapper_1200 acea-row">
        <div class="goods-main">
          <div class="acea-row row-top" style="position: relative;">
            <div class="carousel">
              <img :src="storeInfo.slider_image[slideIndex]" class="preview" />
              <client-only>
                <div v-swiper:carousel="swiperOption">
                  <div class="swiper-wrapper">
                    <div
                      v-for="(item, index) in storeInfo.slider_image"
                      :key="index"
                      :class="{ on: slideIndex === index }"
                      class="swiper-slide"
                      @mouseover="swiperMouseover(index)"
                    >
                      <img :src="item" />
                    </div>
                  </div>
                  <div class="swiper-button-prev swiper-button-white"></div>
                  <div class="swiper-button-next swiper-button-white"></div>
                </div>
              </client-only>
              <div class="acea-row row-middle">
                <div class="btn" style="width:60px" @click="collect">
                  <span
                    :class="[
                      'iconfont',
                      storeInfo.isRelation
                        ? 'icon-yishoucang'
                        : 'icon-shoucang2'
                    ]"
                  ></span
                  >{{
                    storeInfo.isRelation
                      ? $t("page.goodsAddcart.like")
                      : $t("page.goodsAddcart.like")
                  }}
                </div>
                <div class="btn contactBtn" @click="goChat">
                  <span class="iconfont icon-kefu2" ></span
                  >{{ $t("page.user.contact") }}
                  <!-- <div class="qrcode1 contactService">
                    <client-only>
                      <vue-qr
                        :text="
                          $store.state.domain +
                            'pages/chat/customer_list/chat?mer_id=' +
                            storeInfo.mer_id +
                            '&productId=' +
                            storeInfo.product_id
                        "
                        :size="200"
                        :margin="6"
                        style="display: block"
                      ></vue-qr>
                    </client-only>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="text-wrapper">
              <div class="title">{{ storeInfo.store_name }}</div>
              <div class="integral_count" v-if="storeInfo.max_integral > 0">
                <span class="integral"
                  >{{ $t("page.index.integral") }} {{ storeInfo.max_integral }}
                </span>
              </div>
              <div class="acea-row row-middle money-wrapper">
                <div class="money-wrap">
                  <del
                    >{{ $t("page.goodsDetail.oldPrice") }}：${{
                      attrValueSelected
                        ? attrValueSelected.ot_price
                        : storeInfo.ot_price
                    }}
                  </del>
                  <div class="acea-row row-middle">
                    <div class="price">
                      $<span>{{
                        attrValueSelected
                          ? attrValueSelected.price
                          : storeInfo.price
                      }}</span>
                    </div>
                    <div
                      v-if="
                        storeInfo.base &&
                          storeInfo.vip_price &&
                          storeInfo.vip_price > 0
                      "
                      class="acea-row vip"
                    >
                      <div
                        class="acea-row row-center-wrapper iconfontVip"
                      ></div>
                      <div class="acea-row row-center-wrapper money">
                        $<span>{{ storeInfo.vip_price }}</span>
                      </div>
                    </div>
                    <div
                      v-if="
                        storeInfo.is_vip &&
                          storeInfo.vip_price &&
                          storeInfo.vip_price > 0
                      "
                      class="acea-row vip"
                    >
                      <div class="acea-row row-center-wrapper iconfont"></div>
                      <div class="acea-row row-center-wrapper money">
                        $<span>{{ storeInfo.vip_price }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div class="sales acea-row row-column row-center-wrapper">
                  <div class="num">
                    {{ storeInfo.sales ? storeInfo.sales : 0
                    }}{{ storeInfo.unit_name ? storeInfo.unit_name : "" }}
                  </div>
                  <div>{{ $t("page.goodsDetail.sales") }}</div>
                </div> -->
              </div>
              <div class="coupon-wrapper" v-if="makeCouponList.length">
                <div class="acea-row coupon-bd">
                  <div class="label">{{$t('page.user.coupons')}}</div>
                  <div class="list" :class="couponHide ? '' : 'on'">
                    <div
                      v-for="(item, index) in makeCouponList"
                      :key="item.id"
                      class="acea-row row-middle item"
                    >
                      <div class="acea-row cell">
                        <div class="acea-row row-center-wrapper cell-left">
                          {{ item.type }}
                        </div>
                        <div
                          class="acea-row row-center-wrapper cell-right line1"
                        >
                          {{ $t("page.index.full") }}{{ item.use_min_price
                          }}{{ $t("page.index.reduce") }}{{ item.coupon_price }}
                        </div>
                      </div>
                      <div v-if="item.coupon_type == 1" class="time">
                        {{ item.use_start_time | timeYMD }}-{{
                          item.use_end_time | timeYMD
                        }}
                      </div>
                      <div v-if="item.coupon_type == 0" class="time">
                        {{ $t("page.users.userCoupon.receive")
                        }}{{ item.coupon_time }}{{$t('page.index.withindays')}}
                      </div>
                      <button
                        :disabled="item.issue"
                        @click="getCoupon(index, item)"
                      >
                        {{
                          item.issue
                            ? $t("page.users.userCoupon.received")
                            : $t("page.users.userCoupon.receive")
                        }}
                      </button>
                    </div>
                  </div>
                </div>
                <div
                  v-if="makeCouponList.length > 3"
                  class="acea-row row-right row-middle coupon-ft"
                >
                  <div class="button" @click="getCouponList">
                    {{ couponHide ? $t('page.goodsSearch.up') : $t('page.index.moreoffers')
                    }}<span
                      class="iconfont"
                      :class="couponHide ? 'icon-xiangshang' : 'icon-xiangxia'"
                    ></span>
                  </div>
                </div>
              </div>
              <div class="attribute">
                <div
                  v-for="(item, index) in productAttr"
                  :key="index"
                  class="acea-row size-wrapper"
                >
                  <div class="label">{{ item.attr_name }}</div>
                  <div class="acea-row list">
                    <label
                      v-for="(itm, idx) in item.attr_values"
                      :key="idx"
                      class="item"
                    >
                      <input
                        v-model="attrSelected[index]"
                        type="radio"
                        :name="index"
                        :value="itm"
                        :checked="!idx"
                        hidden
                      />
                      <div class="acea-row cont">
                        <div class="acea-row row-middle name">{{ itm }}</div>
                        <div class="iconfont icon-xuanzhong4"></div>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
              <div v-if="shippingValue" class="number-wrapper acea-row">
                <div
                  class="label"
                  @mouseover="tempTitle = true"
                  @mouseleave="tempTitle = false"
                >
                  {{ $t("page.orderDetails.freight") }}
                  <span
                    class="iconfont icon-duoshanghupc-shuomingdanchuang"
                    v-if="storeInfo.temp.info"
                  ></span>
                </div>
                <div
                  class="guaranee_tel"
                  :style="{
                    display:
                      (tempTitle || tempInfo) && storeInfo.temp.info
                        ? 'block'
                        : 'none'
                  }"
                  @mouseover="tempInfo = true"
                  @mouseleave="tempInfo = false"
                >
                  <div class="content" style="white-space: pre-line;">
                    {{ storeInfo.temp.info }}
                  </div>
                </div>
                <div class="counter-wrap">
                  {{ shippingValue }}
                </div>
              </div>
              <div
                v-if="guarantee && guarantee.length"
                class="number-wrapper acea-row"
              >
                <div
                  class="label"
                  @mouseover="guaranteeTitle = true"
                  @mouseleave="guaranteeTitle = false"
                >
                  保障
                  <span
                    class="iconfont icon-duoshanghupc-shuomingdanchuang"
                  ></span>
                </div>
                <div
                  class="guaranee_tel"
                  :style="{
                    display: guaranteeTitle || guaranteeInfo ? 'block' : 'none'
                  }"
                  @mouseover="guaranteeInfo = true"
                  @mouseleave="guaranteeInfo = false"
                >
                  <div class="content">
                    <div v-for="(item, index) in guarantee" class="item">
                      <div class="name">{{ item.guarantee_name }}</div>
                      <div class="info" style="white-space: pre-line;">
                        {{ item.guarantee_info }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="guaranteeAttr">
                  <div class="atterTxt1" v-for="(item, index) in guarantee">
                    <span class="iconfont icon-duoshanghupc-baozhang"></span
                    >{{ item.guarantee_name ? item.guarantee_name : "" }}
                  </div>
                </div>
              </div>
              <div class="number-wrapper acea-row">
                <div class="label">{{ $t("page.goodsDetail.num") }}</div>
                <div class="counter-wrap">
                  <div class="counter">
                    <button
                      class="iconfont icon-shangpinshuliang-jian"
                      :disabled="count === 1 || !stock"
                      @click="minus"
                    ></button>
                    <input v-model="count" @input="inputNum" />
                    <button
                      class="iconfont icon-shangpinshuliang-jia"
                      :disabled="count === stock || !stock"
                      @click="plus"
                    ></button>
                  </div>
                  <span
                    >（ {{ $t("page.goodsDetail.inventory") }} {{ stock
                    }}<!-- {{ storeInfo.unit_name }} -->）</span
                  >
                </div>
              </div>
              <div class="button-wrapper" v-if="stock">
                <button
                  class="btn cart"
                  :disabled="!stock"
                  @click="buy(0, $event)"
                >
                  {{ $t("page.goodsDetail.addCart") }}
                </button>
                <button class="btn" :disabled="!stock" @click="buy(1, $event)">
                  {{ $t("page.goodsDetail.buyNow") }}
                </button>
              </div>
              <div class="button-wrapper" v-else>
                <button class="btn btn-out" disabled>
                  {{ $t("page.goodsDetail.soldOut") }}
                </button>
                <button class="btn btn-notify" @click="arrivalNotice">
                  <span class="iconfont icon-duoshanghupc-daohuotongzhi"></span>
                  {{ $t("page.orderDetails.ArrivalNotice") }}
                </button>
              </div>
            </div>
          </div>
          <div class="detail-wrapper">
            <div class="detail-hd acea-row">
              <div class="tab acea-row">
                <div
                  class="item acea-row row-center-wrapper"
                  :class="{ on: tabIndex === 0 }"
                  @click="tab(0)"
                >
                  {{ $t("page.goodsDetail.details") }}
                </div>
                <div
                  v-if="replyInfo.count > 0"
                  class="item acea-row row-center-wrapper"
                  :class="{ on: tabIndex === 1 }"
                  @click="tab(1)"
                >
                  {{ $t("page.users.goodsCommentList.navTitle") }}({{
                    replyInfo.count
                  }})
                </div>
              </div>
              <div
                class="acea-row row-center-wrapper qrcode-button"
                @mouseover="qrcodeShow = true"
                @mouseout="qrcodeShow = false"
              >
                <span class="iconfont icon-saoma"></span
                >{{ $t("page.index.mobileMall")
                }}<span
                  :class="[
                    'iconfont',
                    qrcodeShow ? 'icon-xiangshang1' : 'icon-xiangxia2'
                  ]"
                ></span>
                <div class="qrcode">
                  <div class="phoneBuy">
                    <client-only>
                      <vue-qr
                        :text="
                          $store.state.domain +
                            'pages/goods_details/index?id=' +
                            storeInfo.product_id
                        "
                        :size="200"
                        :margin="6"
                        style="display: block"
                      ></vue-qr>
                    </client-only>
                  </div>
                </div>
              </div>
            </div>
            <div class="detail-bd">
              <div v-show="tabIndex === 0">
                <div
                  v-if="
                    storeInfo.content.content || storeInfo.content.content.image
                  "
                  class="detail-html"
                >
                  <div
                    v-if="storeInfo.content.type === 0"
                    v-html="storeInfo.content.content"
                  ></div>
                  <div
                    v-if="storeInfo.content.type === 1"
                    class="product_content"
                  >
                    <div
                      v-if="
                        storeInfo.content && storeInfo.content.content.title
                      "
                      class="title"
                    >
                      {{ storeInfo.content.content.title }}
                    </div>
                    <div
                      v-if="
                        storeInfo.content && storeInfo.content.content.image
                      "
                      class="pictures"
                    >
                      <img
                        v-for="(item, index) in storeInfo.content.content.image"
                        :key="index"
                        :src="item"
                      />
                    </div>
                  </div>
                </div>
                <div v-else class="nothing">
                  <img src="@/assets/images/noDetail.png" />
                  <div>{{ $t("page.tips.noDetal") }}</div>
                </div>
              </div>
              <div
                v-show="tabIndex === 1 && replyInfo.count > 0"
                class="comment"
              >
                <div class="comment-hd">
                  <div class="acea-row row-between-wrapper">
                    <div class="rate">
                      <span>{{ replyInfo.rate }}</span
                      ><span>{{
                        $t("page.users.goodsCommentList.satisfy")
                      }}</span>
                    </div>
                    <div class="acea-row row-middle score">
                      {{ $t("page.users.goodsCommentList.score") }}

                      <div class="cont">
                        <span
                          v-for="(v, i) in 5"
                          :key="i"
                          :class="{ on: i + 1 <= storeInfo.rate }"
                          class="iconfont icon-pingjia"
                        ></span>
                      </div>
                    </div>
                  </div>
                  <div class="menu">
                    <div
                      class="item"
                      :class="{ on: reply.type === 'count' }"
                      @click="replyTypeChange('count', replyInfo.stat.count)"
                    >
                      {{ $t("page.users.goodsCommentList.all") }}({{
                        replyInfo.stat.count
                      }})
                    </div>
                    <div
                      class="item"
                      :class="{ on: reply.type === 'best' }"
                      @click="replyTypeChange('best', replyInfo.stat.best)"
                    >
                      {{ $t("page.users.goodsCommentList.goodScore") }}({{
                        replyInfo.stat.best
                      }})
                    </div>
                    <div
                      class="item"
                      :class="{ on: reply.type === 'middle' }"
                      @click="replyTypeChange('middle', replyInfo.stat.middle)"
                    >
                      {{ $t("page.users.goodsCommentList.general") }}({{
                        replyInfo.stat.middle
                      }})
                    </div>
                    <div
                      class="item"
                      :class="{ on: reply.type === 'negative' }"
                      @click="
                        replyTypeChange('negative', replyInfo.stat.negative)
                      "
                    >
                      {{ $t("page.users.goodsCommentList.bad") }}({{
                        replyInfo.stat.negative
                      }})
                    </div>
                  </div>
                </div>
                <div class="comment-bd">
                  <template v-if="replyList.length">
                    <div
                      v-for="item in replyList"
                      :key="item.reply_id"
                      class="item"
                    >
                      <div class="acea-row row-middle item-hd">
                        <div class="image">
                          <img v-if="item.avatar" :src="item.avatar" />
                          <img v-else src="~assets/images/f.png" alt="" />
                        </div>
                        <div class="text">
                          <div class="acea-row row-middle name">
                            {{ item.nickname }}
                            <div class="star">
                              <span
                                v-for="(v, i) in 5"
                                :key="i"
                                class="iconfont icon-pingjia"
                                :class="{ on: i + 1 <= item.rate }"
                              ></span>
                            </div>
                          </div>
                          <div>{{ item.create_time }}</div>
                        </div>
                      </div>
                      <div class="item-bd">
                        <div>{{ item.comment }}</div>
                        <div class="image-wrapper">
                          <div
                            v-for="(itm, idx) in item.pics"
                            :key="idx"
                            class="image"
                            @click="isDialog = true"
                          >
                            <el-image
                              style="width: 54px; height: 54px"
                              :src="itm"
                              :preview-src-list="item.pics"
                            ></el-image>
                          </div>
                        </div>
                        <div v-if="item.merchant_reply_content" class="reply">
                          <div class="item">
                            <span
                              >{{
                                $t("page.users.goodsCommentList.seller")
                              }}：</span
                            >{{ item.merchant_reply_content }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <img
                    v-else-if="!reply.loading"
                    src="@/assets/images/noEvaluate.png"
                  />
                </div>
                <div v-if="replyList.length" class="acea-row row-right">
                  <el-pagination
                    layout="prev, pager, next"
                    :prev-text="$t('page.store.prev')"
                    :next-text="$t('page.store.next')"
                    :page-size="reply.limit"
                    :total="replyCount"
                    @current-change="callPaginate"
                    @prev-click="callPaginate"
                    @next-click="callPaginate"
                  ></el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="recom-section">
          <div class="user-info">
            <div class="store-basis">
              <div class="store-logo">
                <img :src="storeDetail.mer_avatar" alt="" />
              </div>
              <div class="line1">
                <span v-if="storeDetail.is_trader" class="trader">{{
                  $t("page.store.selfSupport")
                }}</span>
                <span class="store-name line1">{{ storeDetail.mer_name }}</span>
              </div>
            </div>
            <div class="store-info">
              <!-- <div class="items acea-row row-middle">
                <span class="titles">{{
                  $t("page.users.goodsCommentList.score")
                }}</span>
                <div class="cont">
                  <span
                    v-for="(v, i) in 5"
                    :key="i"
                    :class="{ on: i + 1 <= score.number.toFixed(1) }"
                    class="iconfont icon-pingjia star"
                  ></span>
                </div>
              </div> -->
              <div class="items acea-row row-middle">
                <span class="titles">{{ $t("page.store.Followers") }}</span>
                <span class="desc">{{
                  storeDetail.care_count < 10000
                    ? storeDetail.care_count
                    : (storeDetail.care_count / 10000).toFixed(1) +
                      $t("page.store.Tenthousand")
                }}</span>
              </div>
              <!-- <div class="items acea-row row-middle">
                <span class="titles">{{ $t("page.store.storePhone") }}</span>
                <span class="desc">{{ storeDetail.service_phone }}</span>
              </div> -->
              <div
                v-if="storeDetail.isset_certificate"
                class="items acea-row row-middle"
              >
                <span class="titles">{{
                  $t("page.store.storeQualification")
                }}</span>

                <nuxt-link
                  class="desc"
                  :to="{
                    path: '/qualifications',
                    query: {
                      id: storeDetail.mer_id,
                      storeName: storeDetail.mer_name
                    }
                  }"
                >
                  <img
                    class="store_qualify"
                    src="~/assets/images/store_qualify.png"
                    alt=""
                  />
                  <span class="license">{{
                    $t("page.user.businesslicense")
                  }}</span>
                </nuxt-link>
              </div>
            </div>
            <div class="store-favorites">
              <button class="collection" @click="goStore">
                {{ $t("page.goodsDetail.goshopping") }}
              </button>
              <button
                class="collection"
                :class="storeDetail.care ? 'care' : ''"
                @click="followToggle(mer_id)"
              >
                {{
                  storeDetail.care
                    ? $t("page.goodsDetail.Favoriteshop")
                    : $t("page.goodsDetail.Favoriteshop")
                }}
              </button>
            </div>
          </div>
          <div class="store-recommend" v-if="goodsList && goodsList.length">
            <div class="title">
              <span>{{ $t("page.goodsDetail.recommend") }}</span>
            </div>
            <div class="list">
              <nuxt-link
                v-for="(item, index) in goodsList"
                :key="index"
                :to="`/goods_detail/${item.product_id}`"
                class="item"
              >
                <div class="image">
                  <img :src="item.image" />
                </div>
                <div class="text">
                  <div class="name">{{ item.store_name }}</div>
                  <div class="acea-row row-between-wrapper">
                    <div class="money">
                      $<span>{{ item.price }}</span>
                    </div>
                    <div class="sales">
                      {{ $t("page.goodsDetail.sales") }} {{ item.sales }}
                    </div>
                  </div>
                </div>
              </nuxt-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ChatItem 
      v-if="$auth.loggedIn"
      :dialogVisible="chatVisible" 
      :title="storeInfo.merchant.mer_name" 
      :mer_id="storeInfo.mer_id"
      :uid="$auth.user.uid"
      :pProductId="id"
      @close="chatVisible = false" />
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import countDown from "@/components/countDown";
import ChatItem from "@/components/chat";
export default {
  components: { countDown, ChatItem },
  auth: false,
  data() {
    return {
      chatVisible:false,
      storeInfo:'',
      moneyLevel: -1,
      showCode: false,
      serviceCode: false,
      search: "",
      show_guaranee: false,
      userMenu: [
        {
          key: 0,
          link: "/store",
          title: this.$t("page.index.ShopHome")
        },
        {
          key: 4,
          title: this.$t("page.index.Categories"),
          link: "/store/category"
        },
        {
          key: 1,
          title: this.$t("page.index.coupons"),
          link: "/store/storeCoupon"
        }
      ],
      categoryList: [],
      category: [], //店铺分类
      seen: false,
      menuCur: "",
      swiperOption: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        slidesPerView: "auto",
        observer: true,
        observeParents: true
      },
      slideIndex: 0,
      tabIndex: 0,
      reply: {
        type: "count",
        page: 1,
        limit: 20,
        loading: false,
        finished: false
      },
      coupon: {
        page: 1,
        limit: 3,
        finished: false
      },
      attrSelected: [],
      attrValueSelected: null,
      count: 1,
      stock: 1,
      unique: "",
      couponHide: false,
      codeUrl: "",
      qrcodeShow: false,
      isDialog: false,
      replyCount: 0,
      replyList: [],
      replyInfo: {
        stat: {}
      },
      couponList: [],
      QRcode: {},
      guaranteeTitle: false,
      guaranteeInfo: false,
      tempTitle: false,
      tempInfo: false
    };
  },
  filters: {
    timeYMD: function(value) {
      if (value) {
        var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(value);
        return newDate[0];
      }
    }
  },
  computed: {
    makeCouponList() {
      return this.couponList.map(value => {
        switch (value.type) {
          case 0:
            value.type = this.$t("page.index.shopvoucher");
            break;
          case 1:
            value.type = this.$t("page.index.Commodityvoucher");
            break;
        }
        return value;
      });
    },
    score: function() {
      let store = this.storeDetail,
        score = {
          star: 0,
          number: 0
        };
      if ("postage_score" in store) {
        score.number =
          (parseFloat(store.postage_score) +
            parseFloat(store.product_score) +
            parseFloat(store.service_score)) /
          3;
        score.star = (score.number / 5) * 100;
      }
      return score;
    }
  },
  watch: {
    productAttr: {
      immediate: true,
      handler(attr) {
        if (attr.length) {
          attr.forEach((value, index) => {
            this.attrSelected[index] = value.attr_values[0];
          });
        } else {
            if(this.productValue){
              const keys = Object.keys(this.productValue)
              if(keys.length >0){
                this.unique =this.productValue[keys[0]].unique
              }
            }
        }
      }
    },
    attrValueSelected(n) {
      if (n.image) {
        this.storeInfo.slider_image[0] = n.image;
        this.slideIndex = 0;
      }
    },
    attrSelected: {
      immediate: true,
      handler(attr) {
        if (attr.length) {
          let name = attr.join(),
            value = this.productValue[name];
          if (value) {
            this.attrValueSelected = value;
            this.stock = value.stock;
            this.unique = value.unique;
          }
        } else {
          this.stock = this.storeInfo.stock;
          if(this.productValue){
              const keys = Object.keys(this.productValue)
              if(keys.length >0){
                this.unique =this.productValue[keys[0]].unique
              }
            }
        }
      }
    }
  },
  async asyncData({ error, app, params, query }) {
    try {
      let [goods] = await Promise.all([
        app.$axios.get(`/api/store/product/detail/${params.id}`)
      ]);
      return {
        storeInfo: goods.data,
        productAttr: goods.data.attr,
        productValue: goods.data.sku,
        goodsList: goods.data.merchant.recommend,
        storeDetail: goods.data.merchant,
        datatime: Number(query.time),
        id: params.id,
        mer_id: goods.data.mer_id,
        shippingValue: goods.data.temp ? goods.data.temp.name : "",
        guaranteeValue: goods.data.guarantee
          ? goods.data.guarantee.template_name
          : "",
        guarantee: goods.data.guaranteeTemplate
          ? goods.data.guaranteeTemplate
          : [],
        shipping: goods.data.temp ? goods.data.temp.info : ""
      };
    } catch (e) {
      error({ statusCode: 500, msg: typeof e === "string" ? e : this.$t('page.index.busy') });
    }
  },

  head() {
    return {
      title: this.storeInfo.store_name + "-" + this.$store.state.titleCon
    };
  },
  fetch({ store }) {
    store.commit("isBanner", false);
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  beforeMount() {
    this.getCoupons();
    this.getCategory();
    this.getReply(1);
  },
  mounted() {
    if (this.$auth.loggedIn) {
      this.moneyLevel = this.$auth.user.is_money_level;
      this.$axios
        .get(`/api/pc/care`, {
          params: {
            type: 10,
            id: this.mer_id
          }
        })
        .then(res => {
          this.storeDetail.care = res.data.care;
        });
    } else {
      this.moneyLevel = -1;
    }
    this.$nextTick(() => {
      document.body.setAttribute("style", "background:#ffffff");
    });
  },
  beforeDestroy() {
    document.body.removeAttribute("style");
  },
  methods: {
    goChat(){
      if(this.$auth.loggedIn) {
        this.chatVisible = true
      } else {
        this.$message.error(this.$t("page.chat.loginHit"))
      }
    },
    //获取店铺分类
    getCategory() {
      this.$axios
        .get(`/api/store/merchant/category/lst/${this.mer_id}`)
        .then(res => {
          this.category = res.data;
        });
    },
    showCategory(index) {
      if (index == 1) {
        this.seen = true;
      } else {
        return;
      }
    },
    goPage(menu, index) {
      this.menuCur = menu.key;
      this.$router.push({
        path: `${menu.link}`,
        query: { id: this.mer_id }
      });
    },
    //进店逛逛
    goStore() {
      this.$router.push({ path: `/store?id=${this.mer_id}` });
    },
    followToggle(id) {
      if (!this.$auth.loggedIn) {
        this.$store.commit("isLogin", true);
      }
      this.storeDetail.care ? this.unfollow(id) : this.follow(id);
    },
    unfollow(id) {
      let that = this;
      that.$axios
        .post("/api/user/relation/delete", {
          type: 10,
          type_id: id
        })
        .then(res => {
          if (res.status === 200) {
            that.storeDetail.care = false;
            this.$message.success(res.message);
          }
        });
    },
    follow(id) {
      let that = this;
      that.$axios
        .post("/api/user/relation/create", {
          type: 10,
          type_id: id
        })
        .then(res => {
          if (res.status === 200) {
            that.storeDetail.care = true;
            this.$message.success(res.message);
          }
        });
    },
    leave() {
      this.seen = false;
    },
    //获取优惠券
    getCoupons() {
      let that = this;
      let goodsArr = [];
      let couponList = [];
      let activeList = [];
      that.$axios
        .get(`/api/coupon/product`, { params: { ids: that.id } })
        .then(res => {
          goodsArr = res.data;
          that.$axios
            .get(`/api/coupon/store/${that.storeInfo.mer_id}`)
            .then(res => {
              couponList = goodsArr.concat(res.data);
              for (let i = 0; i < couponList.length; i++) {
                activeList.push(couponList[i]);
              }
              that.couponList = activeList;
            })
            .catch(err => {
              that.$message.error(err);
            });
        })
        .catch(err => {
          that.$message.error(err);
        });
    },
    submit() {
      if (this.search.trim() !== "") {
        this.$router.push({
          path: "/store/category",
          query: { search: this.search.trim(), id: this.mer_id }
        });
        this.search = "";
      } else {
        this.$message.error(this.$t("page.goodsSearch.placeSearch"));
      }
    },
    goCategoryGoods(cateId, indexn) {
      this.$router.replace({
        path: "/store/category",
        query: { id: this.mer_id, cateId: cateId }
      });
    },
    changeVip(e) {
      this.showCode = e;
    },
    inputNum() {
      this.count = parseInt(this.count) >= this.stock ? this.stock : this.count;
      this.count = parseInt(this.count) <= 1 ? 1 : this.count;
    },
    swiperMouseover(index) {
      this.slideIndex = index;
    },
    callPaginate(num) {
      this.reply.page = num;
      this.getReply(num);
    },
    tab(type) {
      this.tabIndex = type;
    },
    replyTypeChange(type, count) {
      this.replyCount = count;
      this.reply.type = type;
      this.reply.page = 1;
      this.replyList = [];
      this.$axios
        .get(`/api/store/product/reply/lst/${this.$route.params.id}`, {
          params: {
            page: this.reply.page,
            limit: this.reply.limit,
            type: type
          }
        })
        .then(res => {
          this.replyList = res.data.list;
          this.replyInfo = res.data;
        });
    },
    // 优惠券列表
    getCouponList() {
      this.couponHide = !this.couponHide;
    },
    // 加入购物车 | 立即购买
    buy(type, event) {
      if (typeof this.count === "string") {
        if (this.count.trim() === "") {
          return this.$message.error(this.$t("page.goodsAddcart.buymun"));
        }
      }
        
      let btn = event.target;
      btn.disabled = true;
      this.$axios
        .post("/api/user/cart/create", {
          product_id: this.$route.params.id,
          cart_num: this.count,
          is_new: type,
          product_attr_unique: this.unique,
          product_type: 0
        })
        .then(res => {
          btn.disabled = false;
          this.$cookies.remove("cart_checked");
          if (type) {
            this.$router.push({
              path: `/order_confirm?new=1&cartId=${res.data.cart_id}`
            });
          } else {
            // this.$store.commit(
            //   "cartNum",
            //   this.count + this.$store.state.cartnumber
            // );
            this.gainCount();
          }
        })
        .catch(err => {
          btn.disabled = false;
          this.$message.error(err);
        });
    },
    gainCount: function() {
      let that = this;
      that.$axios.get("/api/user/cart/count").then(res => {
        that.$store.commit("cartNum", res.data[0].count || 0);
        this.$message.success(this.$t("page.goodsAddcart.AddtoCartsuccessful"));
      });
    },
    minus() {
      this.count--;
    },
    plus() {
      this.count++;
    },
    // 到货通知
    arrivalNotice() {
      let that = this;
      that.$axios
        .post("/api/store/product/increase_take", {
          unique: that.unique,
          type: 1,
          product_id: that.$route.params.id
        })
        .then(res => {
          this.$message.success(res.message);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    // 领取优惠券
    getCoupon(index, item) {
      let that = this;
      if (!that.$auth.loggedIn) {
        that.$store.commit("isLogin", true);
      }
      that.$axios
        .post("/api/coupon/receive/" + item.coupon_id)
        .then(res => {
          item.issue = true;
          this.$message.success(
            this.$t("page.goodsAddcart.Receivecouponsuccessfully")
          );
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    // 获取评论
    getReply(num) {
      this.reply.loading = true;
      this.$axios
        .get(`/api/store/product/reply/lst/${this.$route.params.id}`, {
          params: {
            page: num,
            limit: this.reply.limit,
            type: this.reply.type
          }
        })
        .then(res => {
          this.replyList = res.data.list;
          this.replyCount = res.data.count;
          this.replyInfo = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    // 收藏 | 取消收藏
    collect() {
      if (this.storeInfo.isRelation) {
        this.$axios
          .post("/api/user/relation/delete", {
            type_id: this.$route.params.id,
            type: 0
          })
          .then(res => {
            this.$message.success(this.$t("page.goodsAddcart.likeok"));
          })
          .catch(err => {
            this.$message.error(err);
          });
      } else {
        this.$axios
          .post("/api/user/relation/create", {
            type_id: this.$route.params.id,
            type: 0
          })
          .then(res => {
            this.$message.success(this.$t("page.goodsAddcart.likeok"));
          })
          .catch(err => {
            this.$message.error(err);
          });
      }
      this.storeInfo.isRelation = !this.storeInfo.isRelation;
    }
  }
};
</script>

<style lang="scss" scoped>
.store-banner {
  width: 100%;
  height: 130px;
  img {
    object-fit: none;
    width: 100%;
    height: 100%;
  }
}
.menu-count {
  width: 100%;
  height: 40px;
  background: #dfdfdf;
}
.store-name {
  display: inline-block;
  width: 120px;
  position: relative;
  top: 4px;
}
.user-menu {
  position: relative;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
  .category {
    position: absolute;
    top: 40px;
    left: 0;
    background-color: rgba(254, 248, 248, 0.96);
    width: 100%;
    padding: 40px 20px 20px;
    z-index: 10;

    .name {
      width: 130px;
      position: relative;
      padding-right: 20px;
      margin-right: 30px;
      cursor: pointer;
      .iconfont {
        font-size: 10px;
        position: absolute;
        right: 0;
        top: 3px;
        color: #282828;
      }
    }
    .sortCon {
      width: 1000px;
      .sub-item {
        margin: 0 15px 15px;
        color: #666666;
        cursor: pointer;
      }
    }
    .erSort {
      align-items: center;
    }
    .item {
      margin-bottom: 20px;
      align-items: baseline;
    }
    .moreBtn {
      color: #282828;
      font-size: 12px;
      width: 100px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 13px;
      border: 1px solid #666666;
    }
  }
  .menu-main {
    width: 300px;
    height: 40px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    .menu-item {
      display: inline-block;
      height: 26px;
      line-height: 26px;
      color: #282828;
      padding: 0 10px;
      cursor: pointer;
      &.active {
        color: #fff;
        background: #282828;
        color: #fff;
        border-radius: 15px;
      }
    }
  }
  .menu-search {
    width: 220px;
    height: 24px;
    background-color: #fff;
    border-radius: 17px;
    .text {
      width: 175px;
    }
    input {
      border: none;
      height: 24px;
      line-height: 24px;
      color: #999999;
      padding: 0 15px;
      border-radius: 17px 0 0 17px;
      &:focus {
        border: none;
        outline: none;
      }
    }
    .bnt {
      width: 44px;
      background-color: #282828;
      color: #fff;
      border-radius: 0 17px 17px 0;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
  }
}
.product_content .title {
  text-align: center;
  font-size: 18px;
  margin: 5px 0;
}
.goods-detail {
  padding-top: 40px;
  border-top: 1px solid #efefef;
  .goods-main {
    flex: 1;
    min-width: 0;
  }
  .carousel {
    width: 380px;

    .preview {
      display: block;
      width: 380px;
      height: 380px;
    }

    .swiper-container {
      padding-right: 25px;
      padding-left: 25px;
      margin-top: 10px;
      margin-bottom: 20px;

      .swiper-button-prev,
      .swiper-button-next {
        top: 0;
        width: 25px;
        height: 100%;
        margin-top: 0;
        background-color: rgba(0, 0, 0, 0.3);
        background-size: 12px 22px;
      }

      .swiper-button-prev {
        left: 0;
      }

      .swiper-button-next {
        right: 0;
      }

      .swiper-slide {
        width: 70px;
        height: 70px;
        border: 2px solid transparent;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;

        &.on {
          border-color: #e93323;
        }

        ~ .swiper-slide {
          margin-left: 10px;
        }

        img {
          display: block;
          width: 70px;
          height: 70px;
        }
      }
    }

    .btn {
      margin-right: 30px;
      font-size: 12px;
      color: #4b4b4b;
      cursor: pointer;
      position: relative;

      .qrcode1 {
        display: none;
        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.08);
        background: #fff;
        padding: 6px;
        position: relative;
        width: 100px;
        img {
          width: 100%;
        }

        &.contactService {
          position: absolute;
          left: 50%;
          top: 25px;
          z-index: 10;
          width: 100px;
          height: 100px;
          margin-left: -50px;
        }
      }
    }

    .contactBtn:hover {
      .qrcode1 {
        display: inline;
      }
    }

    .iconfont {
      margin-right: 6px;
      font-size: 14px;
      color: #e93323;
    }
  }

  .text-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: 40px;

    .title {
      font-size: 20px;
      line-height: 26px;
      color: #333333;
    }
    .integral_count {
      display: inline-block;
      margin-top: 18px;
      color: #ff6200;
      line-height: 27px;
      background: #fff4e6;
      padding: 0 15px;
      border-radius: 2px;
    }
    .money-wrapper {
      height: 78px;
      margin-top: 18px;
      background: url("~assets/images/money-back.png") center/cover no-repeat;
      color: #ffffff;

      .money-wrap {
        flex: 1;
        min-width: 0;
        padding-left: 32px;
      }

      del {
        margin-bottom: 10px;
        font-size: 14px;
      }

      .price {
        font-size: 22px;

        span {
          font-weight: bold;
          font-size: 30px;
        }
      }

      .vip {
        width: 100px;
        height: 25px;
        border-radius: 2px;
        margin-left: 14px;
        background: linear-gradient(205deg, #fdcaa4 0%, #fce3c3 100%);
        overflow: hidden;
        font-size: 12px;
        color: #0f0f0f;

        .iconfont {
          width: 32px;
          background: url("~assets/images/svip.png") center/cover no-repeat;
          height: 25px;
        }

        .iconfontVip {
          width: 32px;
          background: url("~assets/images/vip.png") center/cover no-repeat;
          height: 25px;
        }

        .money {
          flex: 1;
          min-width: 0;

          span {
            font-size: 14px;
          }
        }
      }

      .sales {
        position: relative;
        height: 100%;
        padding-right: 20px;
        padding-left: 20px;
        font-size: 12px;

        &::before {
          content: "";
          position: absolute;
          top: 14px;
          bottom: 12px;
          left: 0;
          width: 1px;
          border-left: 1px solid rgba(255, 255, 255, 0.24);
        }

        .num {
          margin-bottom: 3px;
          font-weight: bold;
          font-size: 18px;
        }
      }

      .timer-wrapper {
        width: 180px;
        margin-right: 15px;
        font-size: 12px;
        color: #ffffff;

        /deep/ .styleAll {
          width: 24px;
          height: 24px;
          margin-right: 3px;
          margin-left: 3px;
          background-color: #ffffff;
          font-size: 16px;
          line-height: 24px;
          text-align: center;
          color: #e93323;

          &:first-child {
            margin-left: 0;
          }

          &:last-child {
            margin-right: 0;
          }
        }

        .progress-group {
          margin-top: 10px;
        }

        .progress {
          width: 120px;
          height: 8px;
          border: 1px solid #ffffff;
          border-radius: 4px;
          font-size: 0;

          span {
            display: inline-block;
            width: 50%;
            height: 100%;
            border-radius: 4px;
            background-color: #ffffff;
          }
        }
      }
    }

    .coupon-wrapper {
      background-color: #f7f7f7;

      .coupon-bd {
        padding-top: 18px;
        padding-bottom: 18px;
        font-size: 12px;
        color: #5a5a5a;

        .label {
          width: 80px;
          padding-left: 20px;
        }

        .list {
          flex: 1;
          min-width: 0;
          padding-right: 24px;
          max-height: 240px;
          overflow-y: auto;
          overflow-x: hidden;

          &.on {
            max-height: 100px;
            overflow: hidden;
          }
        }

        .item {
          margin-top: 11px;

          &:first-child {
            margin-top: 0;
          }
        }

        .cell-left {
          width: 65px;
        }

        .cell-right {
          flex: 1;
          min-width: 0;
          color: #e93323;
          max-width: 94px;
          justify-content: left;
          padding: 0 3px;
        }

        .cell {
          width: 165px;
          height: 24px;
          background: url("~assets/images/coupon-back.png") left top/100% 100%
            no-repeat;
          font-size: 13px;
          color: #ffffff;

          &.svip {
            background-image: url("~assets/images/vipCou.png");
            color: #fdd7b4;

            .cell-right {
              color: #333333;
            }
          }
        }

        .time {
          flex: 1;
          min-width: 0;
          padding-right: 8px;
          padding-left: 8px;
          font-size: 12px;
          color: #727272;
        }

        button {
          border: none;
          border-bottom: 1px solid #e93323;
          background: none;
          font-size: 12px;
          color: #e93323;

          &:disabled {
            border-color: #c0c4cc;
            color: #c0c4cc;
            cursor: not-allowed;
          }
        }
      }

      .coupon-ft {
        height: 36px;
        padding-right: 24px;
        background-color: #f2f2f2;

        .button {
          font-size: 12px;
          color: #666666;
          cursor: pointer;

          .iconfont {
            margin-left: 7px;
            font-size: 10px;
            color: #666666;
          }
        }
      }
    }

    .attribute {
      margin-top: 30px;

      .size-wrapper {
        .label {
          width: 78px;
          padding-left: 20px;
          font-size: 12px;
          color: #5a5a5a;
          margin-right: 2px;
          word-break: break-all;
          padding-top: 2px;
        }

        .list {
          flex: 1;
          min-width: 0;
        }

        .item {
          margin-right: 12px;
          margin-bottom: 16px;
          box-sizing: border-box;
          cursor: pointer;

          .cont {
            position: relative;
            height: 32px;
            border: 1px solid #d3d3d3;
          }

          &:hover {
            .cont {
              border-color: #e93323;
              color: #e93323;
            }
          }

          input:checked {
            + .cont {
              border-color: #e93323;
              color: #e93323;

              .iconfont {
                display: block;
              }
            }
          }
        }

        .image {
          width: 34px;
          height: 34px;
        }

        img {
          display: block;
          width: 100%;
          height: 100%;
        }

        .name {
          padding-right: 20px;
          padding-left: 20px;
          font-size: 12px;
        }

        .iconfont {
          position: absolute;
          right: -3px;
          bottom: -4px;
          display: none;
          font-size: 22px;
        }
      }
    }
    .number-wrapper {
      margin-top: 18px;
      position: relative;
      .guaranee_tel {
        position: absolute;
        top: 20px;
        left: 0;
        background: #ffffff;
        z-index: 10;
        padding: 0 24px 24px;
        display: none;
        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.08);
        .item {
          margin-top: 24px;
          .name {
            font-size: 16px;
            color: #000000;
          }
          .info {
            font-size: 12px;
            color: #969696;
            margin-top: 6px;
          }
        }
      }
      .icon-duoshanghupc-shuomingdanchuang {
        color: #e93323;
        font-size: 12px;
        position: relative;
      }
      .label {
        cursor: pointer;
      }
      .guaranteeAttr {
        display: inline-block;
        width: 445px;
      }
      .atterTxt1 {
        display: inline-block;
        margin: 0 20px 11px 0;
        .icon-duoshanghupc-baozhang {
          display: inline-block;
          font-size: 14px;
          color: #e93323;
          margin-right: 2px;
        }
      }

      .label {
        width: 78px;
        padding-left: 20px;
        font-size: 12px;
        color: #5a5a5a;
        margin-right: 2px;
        word-break: break-all;
        padding-top: 2px;
      }

      .counter-wrap {
        flex: 1;
        min-width: 0;

        span {
          vertical-align: bottom;
          font-size: 14px;
          color: #5a5a5a;
        }
      }

      .counter {
        display: inline-block;
        border: 1px solid #d3d3d3;
        font-size: 0;

        button {
          width: 44px;
          height: 36px;
          border: none;
          background: none;
          outline: none;
          font-weight: inherit;
          font-size: 12px;
          font-family: inherit;
          color: #707070;
          vertical-align: middle;

          &:disabled {
            color: #d0d0d0;
            cursor: not-allowed;
          }
        }

        input {
          width: 64px;
          height: 36px;
          border: none;
          border-right: 1px solid #d3d3d3;
          border-left: 1px solid #d3d3d3;
          outline: none;
          font-weight: inherit;
          font-size: 18px;
          font-family: inherit;
          text-align: center;
          color: #5a5a5a;
          vertical-align: middle;
        }
      }
    }

    .button-wrapper {
      margin-top: 46px;
      font-size: 0;

      .btn {
        width: 158px;
        height: 50px;
        border: 1px solid #e93323;
        border-radius: 4px;
        font-size: 16px;
        color: #e93323;
        &.btn-out {
          width: 120px;
          color: #ffffff;
          background: #d0d0d0;
        }
        &.btn-notify {
          width: 120px;
          border-color: #e93323;
          color: #e93323;
        }

        ~ .btn {
          margin-left: 18px;
        }
      }

      button {
        background: none;
        outline: none;
        vertical-align: middle;

        &:disabled {
          border-color: #ebeef5;
          color: #c0c4cc;
          cursor: not-allowed;
        }

        &.cart {
          background-color: #e93323;
          color: #ffffff;

          &:disabled {
            border-color: #fab6b6;
            background-color: #fab6b6;
          }
        }

        ~ button {
          margin-left: 18px;
        }
      }

      a {
        display: inline-block;
        background-color: #e93323;
        vertical-align: middle;
        line-height: 50px;
        text-align: center;

        &.btn {
          color: #ffffff;
        }
      }
    }
  }

  .detail-wrapper {
    margin-top: 70px;

    .detail-hd {
      background-color: #f7f7f7;

      .tab {
        flex: 1;
        min-width: 0;
      }

      .item {
        position: relative;
        height: 56px;
        padding-right: 30px;
        padding-left: 30px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;

        &.on {
          background: url("~assets/images/checked.png") center top/100% 7px
            no-repeat;
          color: #e93323;
        }

        &::before {
          content: "";
          position: absolute;
          top: 18px;
          bottom: 18px;
          left: 0;
          width: 1px;
          border-left: 1px solid #d9d9d9;
        }

        &:first-child::before {
          display: none;
        }

        &:hover {
          color: #e93323;
        }
      }

      .qrcode-button {
        position: relative;
        width: 160px;
        height: 56px;
        background-color: #ededed;
        font-size: 14px;
        color: #333333;
        cursor: pointer;

        &:hover {
          .qrcode {
            display: block;
          }
        }

        .icon-saoma {
          margin-right: 6px;
          font-size: 13px;
          line-height: 1;
          color: #000000;
        }

        .icon-xiangxia2,
        .icon-xiangshang1 {
          margin-left: 10px;
          font-size: 10px;
          line-height: 12px;
          color: #d0d0d0;
        }

        .qrcode {
          position: absolute;
          z-index: 99;
          display: none;
          padding: 6px;
          background-color: #ffffff;
          border: 1px solid #ededed;
          margin-top: 6px;
          width: 160px;
          height: 160px;
          top: 50px;
          left: 0px;
          box-sizing: border-box;

          /deep/ img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .detail-bd {
      .detail-html {
        /deep/ div {
          width: 100% !important;
        }

        /deep/ img {
          display: block;
          width: 100% !important;
        }
      }
    }

    .comment {
      .comment-hd {
        padding-top: 30px;
        padding-bottom: 30px;

        .rate {
          font-size: 0;

          span {
            font-size: 14px;
            color: #e93323;

            ~ span {
              margin-left: 5px;
            }
          }
        }

        .score {
          font-size: 14px;
          color: #7e7e7e;

          .cont {
            margin-left: 8px;
          }

          .iconfont {
            font-size: 12px;
            color: #e6e6e6;

            ~ .iconfont {
              margin-left: 5px;
            }

            &.on {
              color: #e93323;
            }
          }
        }

        .menu {
          margin-top: 20px;
          font-size: 0;

          .item {
            display: inline-block;
            width: 86px;
            height: 34px;
            border-radius: 2px;
            background-color: #f7f7f7;
            font-size: 14px;
            line-height: 34px;
            text-align: center;
            color: #282828;
            cursor: pointer;

            &:hover {
              color: #e93323;
            }

            &.on {
              background-color: #e93323;
              color: #ffffff;
            }

            ~ .item {
              margin-left: 14px;
            }
          }
        }
      }

      .comment-bd {
        > img {
          width: 200px;
          margin: 50px auto;
        }

        .item {
          padding-top: 20px;
          padding-bottom: 20px;

          .item-hd {
            .image {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              overflow: hidden;
            }

            img {
              display: block;
              width: 100%;
              height: 100%;
            }

            .text {
              flex: 1;
              margin-left: 12px;
              font-size: 14px;
              color: #868686;
            }

            .name {
              margin-bottom: 4px;
              font-size: 16px;
              color: #282828;
            }

            .star {
              margin-left: 12px;
              font-size: 0;
            }

            .iconfont {
              font-size: 12px;
              color: #e6e6e6;

              &.on {
                color: #e93323;
              }

              ~ .iconfont {
                margin-left: 5px;
              }
            }
          }

          .item-bd {
            padding-bottom: 20px;
            border-bottom: 1px solid #e3e3e3;
            margin-left: 52px;
            font-size: 14px;
            color: #282828;

            > div {
              margin-top: 15px;
            }

            .image-wrapper {
              font-size: 0;
            }

            .image {
              display: inline-block;
              width: 54px;
              height: 54px;
              margin-right: 8px;
              margin-bottom: 10px;

              img {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .reply {
              background-color: #f7f7f7;

              .item {
                padding: 7px 12px;
                font-size: 14px;
                color: #282828;

                span {
                  color: #e93323;
                }
              }
            }
          }
        }
      }
    }
  }
  .user-info {
    width: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 350px;
    background: #fff;
    color: #282828;
    font-size: 14px;
    border: 1px solid #efefef;
    border-radius: 4px;
    padding: 0 20px;
    .store-basis {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-bottom: 1px dashed #ececec;
      height: 130px;
      .trader {
        display: inline-block;
        width: 32px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        color: #e93323;
        color: #fff;
        background: #e93323;
        border-radius: 2px;
        margin-right: 3px;
        font-size: 12px;
        font-family: "PingFang SC";
      }
    }
    .store-logo {
      width: 61px;
      height: 61px;
      margin-bottom: 15px;
      img {
        width: 61px;
        height: 61px;
        border-radius: 50%;
      }
    }
    .name {
      margin-top: 10px;
      padding: 0 15px;
    }
  }
  .store-info {
    padding: 15px 0 0;
    position: relative;
    border-bottom: 1px dashed #ececec;
    .service {
      right: 210px;
      position: absolute;
      top: 0;
      .ewm {
        width: 140px;
        border: 1px solid #eeeeee;
        background-color: #fff;
        padding: 10px 15px;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        align-items: center;
        color: #282828;
        // font-family: 'Microsoft YaHei';
        .tip {
          font-size: 14px;
          color: #666666;
          margin-top: 10px;
        }
      }
    }
    .items {
      font-size: 12px;
      color: #7e7e7e;
      margin-bottom: 15px;
      .iconfont {
        cursor: pointer;
      }
      .cont {
        margin-left: 8px;
      }

      .star {
        font-size: 12px;
        color: #e6e6e6;
        ~ .star {
          margin-left: 5px;
        }
        &.on {
          color: #e93323;
        }
      }
      .titles {
        color: #999999;
        font-size: 12px;
        margin-right: 15px;
      }
      .desc {
        color: #333333;
        position: relative;
        .store_qualify {
          width: 16px;
          height: 16px;
          &:hover + .license {
            display: inline-block;
          }
        }
      }
      .license {
        width: 90px;
        line-height: 26px;
        color: #fff;
        text-align: center;
        background: #282828;
        border-radius: 5px;
        position: absolute;
        top: 26px;
        left: -10px;
        display: none;
        &:before {
          content: "";
          display: inline-block;
          border: 3px solid transparent;
          border-bottom-color: #282828;
          position: absolute;
          top: -6px;
          left: 15px;
        }
      }
    }
  }
  .recom-section {
    align-self: flex-start;
    min-width: 210px;
    margin-left: 40px;
    .store-recommend {
      margin-top: 10px;
      padding: 0 20px;
      border: 1px solid #efefef;
      border-radius: 4px;
    }
    .title {
      height: 60px;
      font-size: 16px;
      line-height: 60px;
      text-align: center;
      color: #5a5a5a;

      span {
        position: relative;

        &::before {
          content: "";
          position: absolute;
          top: 50%;
          right: 100%;
          margin-right: 18px;
          width: 35px;
          height: 1px;
          border-top: 1px solid #efefef;
          transform: translateY(-50%);
        }

        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 100%;
          margin-left: 18px;
          width: 35px;
          height: 1px;
          border-top: 1px solid #efefef;
          transform: translateY(-50%);
        }
      }
    }

    .item {
      display: block;
      width: 170px;
      margin-bottom: 20px;

      .image {
        width: 170px;
        height: 170px;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .text {
        .name {
          margin-top: 10px;
          margin-bottom: 10px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 13px;
          color: #666666;
        }

        .money {
          font-weight: bold;
          font-size: 14px;
          color: #e93323;

          span {
            font-size: 18px;
          }
        }

        .sales {
          font-size: 12px;
          color: #888888;
        }
      }
    }
  }

  .el-pagination {
    padding: 0;
    border: 1px solid #cccccc;

    /deep/ button {
      width: 78px;
      height: 38px;
      padding: 0;
      font-size: 15px;
      color: #707070;

      &.btn-prev {
        border-right: 1px solid #cccccc;
      }

      &.btn-next {
        border-left: 1px solid #cccccc;
      }
    }

    /deep/ li {
      width: 38px;
      height: 38px;
      padding: 0;
      font-weight: normal;
      font-size: 15px;
      line-height: 38px;
      color: #707070;

      ~ li {
        border-left: 1px solid #cccccc;
      }

      &.active {
        background-color: #e93323;
        color: #ffffff;
      }
    }
  }

  .nothing {
    margin-top: 100px;
    font-size: 16px;
    text-align: center;
    color: #999999;

    img {
      margin: 0 auto;
    }
  }
}
.store-favorites {
  margin-top: 14px;
  .collection {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333333;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    background: #fff;
    &.care {
      color: #fff;
      background-color: #e93323;
      border-color: #e93323;
    }
  }
}
</style>
